<template>
  <div>
    <p>经纪人管理</p>
    <div class="headers">
      <p class="sou">搜索:</p>
      <input
        type="text"
        v-model="inp"
        placeholder="   请输入经纪人名字/手机号"
        class="inp"
      />
      <div class="zhuang">
        <span style="margin-left: 25px; line-height: 20px">状态 : </span>

        <el-select v-model="value" class="m-2" placeholder="请选择" size="large">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <button class="btn" @click="query">查询</button>
        <el-button class="upbtn" text @click="dialogFormVisible = true"> 新增 </el-button>
      </div>
      <!-- <Dialog @methodName="handleEvent">新增</Dialog> -->
    </div>
    <div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="序号" width="100" />
        <el-table-column prop="name" label="姓名" width="120" />
        <el-table-column prop="mobile" label="手机号" width="120" />
        <el-table-column prop="company" label="公司" width="120" />
        <el-table-column prop="second_hand_house" label="新房" width="100" />
        <el-table-column prop="lease_house" label="二手房" width="100" />
        <el-table-column prop="first_hand_house" label="租房" width="100" />
        <el-table-column label="状态" width="100">
          <template #default="scope">
            {{ scope.row.status === "1" ? "在职" : "离职" }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="400">
          <template #default="scope">
            <el-button
              link
              type="primary"
              size="small"
              @click="handleClick(scope.row, scope.$index)"
              >编辑</el-button
            >
            <el-button link type="primary" size="small" @click="del(scope.row)"
              >删除</el-button
            >
            <el-button link type="primary" size="small">启用</el-button>
            <el-button link type="primary" size="small">禁用</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog v-model="dialogFormVisible" :title="str">
      <el-form :model="form">
        <el-form-item label="序号" :label-width="formLabelWidth">
          <el-input v-model="form.id" autocomplete="off" />
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth">
          <el-input v-model="form.mobile" autocomplete="off" />
        </el-form-item>
        <el-form-item label="公司" :label-width="formLabelWidth">
          <el-input v-model="form.company" autocomplete="off" />
        </el-form-item>
        <el-form-item label="新房" :label-width="formLabelWidth">
          <el-input v-model="form.second_hand_house" autocomplete="off" />
        </el-form-item>
        <el-form-item label="二手房" :label-width="formLabelWidth">
          <el-input v-model="form.lease_house" autocomplete="off" />
        </el-form-item>
        <el-form-item label="租房" :label-width="formLabelWidth">
          <el-input v-model="form.first_hand_house" autocomplete="off" />
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-select v-model="form.status" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">Cancel</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">
            <span @click="submit">提交</span>
          </el-button>
        </span>
      </template>
    </el-dialog>
    <div class="demo-pagination-block">
      <el-pagination
        v-model:current-page="currentPage4"
        v-model:page-size="pageSize4"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData1.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script setup>
// import Dialog from "../../components/loding/dialog.vue"
import { ref, reactive, onMounted } from "vue";
import { GET_BROKER, GET_STATE, GET_ADDJJR, GET_DELECTJJR } from "../../api/api.js";

const str = ref("新增");
//mock 的数据
const status = ref(true);
const tableData = ref([]);
const tableData1 = ref([]);

// 接收子组件传过来的数据
const handleEvent = (result) => {
  console.log(result, "22222");
};

import { defineComponent } from "vue";
const dialogTableVisible = ref(false);
const dialogFormVisible = ref(false);
const formLabelWidth = "140px";
const value = ref(true);
const currentPage4 = ref(1);
const pageSize4 = ref(5);
const form = ref({
  id: "",
  name: "",
  mobile: "",
  company: "",
  second_hand_house: "",
  lease_house: "",
  first_hand_house: "",
  status: "",
});

const inp = ref("");
onMounted(() => {
  getlist();

  const params = {
    currentPage: 1,
    pageSize: 10000,
  };

  GET_BROKER(params)
    .then((res) => {
      console.log(res);

      tableData1.value = res.data.data.list;
    })
    .catch((err) => {});
});
const getlist = () => {
  const params = {
    currentPage: currentPage4.value,
    pageSize: pageSize4.value,
  };
  GET_BROKER(params)
    .then((res) => {
      console.log(res);
      tableData.value = res.data.data.list;
    })
    .catch((err) => {});
};

//新增
const options = [
  {
    value: "0",
    label: "离职",
  },
  {
    value: "1",
    label: "在职",
  },
];
const tabindex = ref(-1);
const submit = () => {
  if (tabindex.value >= 0) {
    console.log("编辑");

    const data = {
      id: form.value.id,
      status: form.value.status,
      name: form.value.name,
      mobile: form.value.mobile,
      company: form.value.company,
      second_hand_house: form.value.second_hand_house,
      lease_house: form.value.lease_house,
      first_hand_house: form.value.first_hand_house,
    };
    console.log(form);

    GET_STATE(data)
      .then((res) => {
        console.log(res);
        // const processedRes = {
        //   ...res,
        //   status: res.status === 1 ? true : false,
        // };
        getlist();
      })
      .catch((err) => {});
  } else {
    console.log("新增");
    if (form.value.company.length === 0) {
      alert("数据为必填项");
    } else {
      const data = {
        id: form.value.id,
        status: form.value.status,
        name: form.value.name,
        mobile: form.value.mobile,
        company: form.value.company,
        second_hand_house: form.value.second_hand_house,
        lease_house: form.value.lease_house,
        first_hand_house: form.value.first_hand_house,
      };
      console.log(data);
      GET_ADDJJR(data)
        .then((res) => {
          console.log(data);
          getlist();
        })
        .catch((err) => {});
    }
  }
};

const params = ref({
  currentPage: currentPage4,
  pageSize: pageSize4,
});

const handleSizeChange = (pageSize) => {
  console.log(pageSize, "pageSize");
  params.value.pageSize = pageSize;
  currentPage.value.currentPage = 1;
  getlist();
};
const handleCurrentChange = (currentPage) => {
  console.log(currentPage, "currentPage");
  params.value.currentPage = currentPage;
  getlist();
};

///删除
const del = (row) => {
  const index = tableData.value.indexOf(row);
  if (index !== -1) {
    const data = {
      id: row.id,
    };
    GET_DELECTJJR(data)
      .then((res) => {
        console.log(res);
        getlist();
      })
      .catch((err) => {});
  }
};
const query = () => {
  tableData.value = tableData.value.filter((v) => v.name.includes(inp.value));
};

//编辑

const handleClick = (row, index) => {
  dialogFormVisible.value = true;
  str.value = "编辑";
  const newObj = Object.assign({}, row);

  form.value = reactive(newObj);

  tabindex.value = index;
};
</script>
<style scoped lang="scss">
.btn {
  margin-left: 10px;
  width: 3.5rem;
  height: 2rem;
  border-radius: 5px;
  background: #ccc;
  border: 2px solid #ccc;
  color: #fff;
}

.upbtn {
  margin-left: 10px;
  width: 3.5rem;
  color: #fff;
  background: #ccc;
  border: 2px solid #ccc;
}

.headers {
  width: 100%;
  height: 2.5rem;
  display: flex;
  margin-top: 20px;
  margin-bottom: 20px;

  .inp {
  }
}

.sou {
  width: 3%;
  line-height: 35px;
  /* background: palegoldenrod; */
}

.inp {
  width: 20%;
  height: 38px;
  border: #ccc;
  border-radius: 4px;
  border: 1px solid #e4dfdf;
}

.zhuang {
  width: 40%;
  /* background: palegreen; */

  .qing {
    line-height: 15px;
  }

  .aaa {
    width: 25%;
    height: 2.5rem;
  }
}
</style>
